<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色维护</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="./js/vue.js"></script>
		<script src="./js/asiox.js"></script>
		<script src="js/common.js"></script>
		<script src="./js/elementui.js"></script>
	</head>
	<body>
		<div id="app">
			<template>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column label="角色id" width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.roleid }}</span>
						</template>
					</el-table-column>
					<el-table-column label="角色名称" width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.rolename }}</span>
						</template>
					</el-table-column>
					<el-table-column label="角色部门" width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.description }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot="header" slot-scope="scope">
							<!-- 操作 -->
							<el-button type="primary" size="mini" @click="xin">新增</el-button>
						</template>
						<template slot-scope="scope">
							<el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">角色菜单</el-button>
							<el-button size="mini" type="danger"
								@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				</el-table>

				<el-drawer title="角色维护" :visible.sync="drawer" :before-close="handleClose">
					&nbsp;
					<el-button type="primary" size="mini" @click="uprolemenusubmit">确定修改角色菜单</el-button>
					            <el-tree :check-strictly="true" @check="trchange" :data="menuinfoList" show-checkbox
						default-expand-all node-key="menuid" ref="tree" highlight-current>
					</el-tree>
					  </el-drawer>
			</template>
			<el-dialog :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="form" :rules="rules" ref="form" label-width="formLabelWidth" class="demo-ruleForm">
					<el-form-item label="角色" :label-width="formLabelWidth" prop="rolename">
						<el-input v-model="form.rolename" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="部门" :label-width="formLabelWidth" prop="description">
						<el-input v-model="form.description" autocomplete="off">
						</el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm('menuOne')">提 交</el-button>
				</div>
				 
			</el-dialog>
		</div>


	</body>
</html>
<script>
	new Vue({
		el: "#app",
		data: {
			tableData: [],
			drawer: false, //控制角色菜单维护抽屉的展示
			menuinfoList: [], //菜单集合
			form: {
				roleId: '',
				rolename: '',
				description: ''
			},
			dialogFormVisible: false,
			formLabelWidth: "80px",
			title: "新增角色",
			rules: {
				rolename: [{
					required: true,
					message: '请填写角色',
					trigger: 'blur'
				}],
				description: [{
					required: true,
					message: '请填写部门',
					trigger: 'blur'
				}]
			},
			bot: true,
			newroleid: 0,

		},
		methods: {
			//修改角色菜单
			uprolemenusubmit(i, row) {
				let treeNowArr = this.$refs.tree.getCheckedKeys(); //获取树所有选中节点(数组)
				// console.log(treeNowArr);
				console.log(this.newroleid);
				axios.post(API + "updateRoleMenu", {
					roleid: this.newroleid,
					list: treeNowArr
				}).then((res) => {
					if (res.data.data.b == false) {
						  this.$message({
						          message: '修改成功!',
						          type: 'success'
						        });
					} else {
						   this.$message.error('修改失败');
					}
					this.drawer = false

				})
			},
			//树的复选框时间
			trchange(a, b) {
				let treeNowArr = this.$refs.tree.getCheckedKeys(); //获取树所有选中节点(数组)
				treeNowArr.push(a.parentid) //把当前节点的父ID加入到树
				// console.log(a.children)
				if (a.children != null) {
					const childIdArr = a.children.map((obj) => obj.menuid) //获取当前节点的所有子节点
					treeNowArr = treeNowArr.filter(item => !childIdArr.includes(item));
				}
				this.$refs.tree.setCheckedKeys(treeNowArr);
				// console.log(treeNowArr);

			},
			edit(index, row) {
				this.bot = false
				this.title = "修改角色"
				this.dialogFormVisible = true
				axios.get(API + "roleOne?id=" + row.roleid).then((res) => {
					this.form = res.data.data.roleOne
					console.log(this.form)
				});
			},
			submitForm() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						if (this.bot) {
							axios.post(API + "insrole", this.form).then((result) => {
								alert(result.data);
								this.init()
								this.dialogFormVisible = false
							})
						} else {

							axios.post(API + "updateRoleinfo", this.form).then((res) => {
								alert(res.data)
								this.init() //初始化方法	
								this.dialogFormVisible = false
							})
						}

					}
				})

			},
			xin() {
				this.form = {}
				this.bot = true
				this.title = "新增角色"
				this.dialogFormVisible = true;
			},
			handleClose() {
				this.$confirm('确认关闭？')
					.then(_ => {
						this.drawer = false
					})
					.catch(_ => {});
			},
			init() {
				axios.get(API + "getRoleinfo").then((res) => {
					this.tableData = res.data.data.roleinfo
				})
			},
			initData() {
				//查询所有菜单
				axios.get(API + "selectListAll").then((res) => {
					console.log(res.data.data.menuinfos);
					let s = arrayToTree(res.data.data.menuinfos)
					this.menuinfoList = s
				}).catch(err => {
					console.log(err);
				})
			},
			//填充数据
			handleEdit(index, row) {
				this.initData()
				this.newroleid = row.roleid
				axios.get(API + "selectRoleMenusByRid?roleid=" + row.roleid).then((res) => {
					let slist = res.data.data.rolemenus
					const arr = slist.map((obj) => obj.menuid); //取数组里面对象的属性
					this.$refs.tree.setCheckedKeys(arr);
					console.log(res.data.data.rolemenus);
				})
				this.drawer = true
			},
			//删除
			handleDelete(index, row) {

			}
		},
		created() {
			this.init()

		}
	})
</script>